﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quick Start - Layui</title>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    @* 设置背景颜色为灰色 *@
    <div class="layui-bg-gray" style="padding:16px 100px 16px 100px;">
        @* layui-panel 创建一个面板样式的容器 *@
        <div class="layui-panel" style="width:100%;">
            @* layui-card 创建一个卡片样式的容器*@
            @* 你可以根据需要调整这里的宽度和高度 *@
            <div class="layui-card">
                @* 标题 *@
                <div class="layui-card-header">
                    <h3 style="color: #34c38f">
                        <i class="layui-icon layui-icon-left" style="color: #dcccc0"></i><a style="color: #e2e2e2;cursor:pointer" href="/WorkCenter/QueryWorkCenter"> 返回&nbsp;&nbsp;</a><span style="color: #000">|</span>&nbsp;&nbsp;工作中心&nbsp;<span style="color: #000">(状态码)</span>
                    </h3>
                    @* 墨绿分割线 *@
                    <hr class="layui-border-green">
                </div>
                <br />
                @* 主体 *@
                <div class="layui-card-body">
                    <form class="layui-form layui-row layui-col-space16" lay-filter="demo-val-filter" action="">
                        <div class="layui-col-md5">
                            <div class="layui-form-item" style="margin-bottom: 10px;">
                                <label class="layui-form-label">工作中心编码</label>
                                <div class="layui-input-block">
                                    <input type="text" id="workCenterCode" name="workCenterCode" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-md5">
                            <div class="layui-form-item" style="margin-bottom: 10px;">
                                <label class="layui-form-label">工作中心名称</label>
                                <div class="layui-input-block">
                                    <input type="text" id="workCenterName" name="workCenterName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-md5">
                            <div class="layui-form-item" style="margin-bottom: 10px;">
                                <label class="layui-form-label">工作中心类型</label>
                                <div class="layui-input-block">
                                    <select id="workCenterType" name="workCenterType" lay-verify="required" lay-search class="layui-select">
                                        <option value="">请选择</option>
                                        <option value="加工组">加工组</option>
                                        <option value="生产组">生产组</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-md5">
                            <div class="layui-form-item" style="margin-bottom: 10px;">
                                <label class="layui-form-label">班次</label>
                                <div class="layui-input-block">
                                    <select id="classes" name="classes" lay-verify="required" class="layui-select">
                                        <option value="">请选择</option>
                                        <option value="白班">白班</option>
                                        <option value="晚班">晚班</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-md5">
                            <div class="layui-form-item" style="margin-bottom: 10px;">
                                <label class="layui-form-label">状态</label>
                                <div class="layui-input-block">
                                    <select id="workCenterState" name="workCenterState" lay-verify="required" class="layui-select">
                                        <option value="0">请选择</option>
                                        <option value="1">有效</option>
                                        <option value="2">无效</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-md5">
                            <div class="layui-form-item" style="float:right;margin-top: 60px;">
                                <div class="layui-input-block">
                                    <!-- 初始显示保存和提交按钮 -->
                                    <button type="submit" id="saveButton" class="layui-btn layui-icon layui-icon-add-1" lay-submit lay-filter="demo-val">保存</button>
                                    <button type="button" id="approveButton" class="layui-btn layui-bg-blue" lay-submit lay-filter="demo1-val" onclick="updateState(2)">提交</button>
                                    <!-- 审核通过按钮和驳回按钮初始隐藏 -->
                                    <button type="button" id="tongButton" class="layui-btn layui-bg-orange" style="display: none;" lay-submit lay-filter="demo1-val" onclick="updateState(3)">审核通过</button>
                                    <button type="button" id="boButton" class="layui-btn layui-bg-red" style="display: none;" lay-submit lay-filter="demo1-val" onclick="updateState(4)">驳回</button>
                                    <button type="button" id="bianButton" class="layui-btn layui-bg-red" style="display: none;" lay-submit lay-filter="demo1-val" onclick="updateState(5)">变更</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        @* 资源行 *@
        <div class="layui-panel" style="width:100%;">
            <div class="layui-card">
                @* 标题 *@
                <div class="layui-card-header">
                    <h3 style="color: #34c38f">
                        <span style="color:#1e9fff;">资源行</span>
                    </h3>
                    @* 蓝色分割线 *@
                    <hr class="layui-border-blue">
                </div>
                @* 主体 *@
                <div class="layui-card-body">
                    <div class="layui-tab">
                        <ul class="layui-tab-title">
                            <li class="layui-this">行信息</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div>
                                @* 弹出框 *@
                                <button type="button" style="float:right;font-weight:bold;" class="layui-btn layui-icon layui-icon-addition" id="openLayerBtn">新增资源</button>
                            </div>
                            @* 表格 *@
                            <table class="layui-table">
                                <thead>
                                    <tr>
                                        <td>序号</td>
                                        <td>资源编码</td>
                                        <td>资源名称</td>
                                        <td>可用数量</td>
                                        <td>创建人</td>
                                        <td>创建时间</td>
                                        <td>状态</td>
                                        <td>操作</td>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            <div id="demo-laypage-all"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</body>

</html>
<script>
    // 使用layui的layer模块
    layui.use(function () {
        var $ = layui.$;
        var form = layui.form;
        var table = layui.table;
        var laypage = layui.laypage;
        var layer = layui.layer;

        //获取分页数据
        var pageIndex = 1;
        var pageSize = 3;

        var btnnum = 0;

        $(function () {
            // $('#Inquire').toggle();
            GetWorkCenter();//工作中心返填
            //判断按钮显示
            if (btnnum == 1) {
                $('#approveButton').show(); // 显示提交按钮
                $('#tongButton').hide(); // 隐藏审核通过按钮
                $('#boButton').hide(); // 隐藏驳回按钮
                $('#bianButton').hide(); // 隐藏变更按钮
            }
            else if (btnnum == 2) {
                $('#saveButton').hide(); // 隐藏保存按钮
                $('#approveButton').hide(); // 隐藏提交按钮
                $('#tongButton').show(); // 显示审核通过按钮
                $('#boButton').show(); // 显示驳回按钮
                $('#openLayerBtn').hide(); // 隐藏资源按钮
                $('#bianButton').hide(); // 隐藏变更按钮
            }
            else if (btnnum == 3) {
                $('#saveButton').hide(); // 隐藏保存按钮
                $('#approveButton').hide(); // 隐藏提交按钮
                $('#tongButton').hide(); // 隐藏审核通过按钮
                $('#boButton').hide(); // 隐藏驳回按钮
                $('#openLayerBtn').hide(); //隐藏资源按钮
                $('#bianButton').show(); // 显示变更按钮
            }
            else if (btnnum == 4) {
                $('#saveButton').show(); // 隐藏保存按钮
                $('#approveButton').show(); // 隐藏提交按钮
                $('#tongButton').hide(); // 隐藏审核通过按钮
                $('#boButton').hide(); // 隐藏驳回按钮
                $('#openLayerBtn').show(); //隐藏资源按钮
                $('#bianButton').hide(); // 显示变更按钮
            }
            else if (btnnum == 5) {
                $('#saveButton').show(); // 隐藏保存按钮
                $('#approveButton').show(); // 隐藏提交按钮
                $('#tongButton').hide(); // 隐藏审核通过按钮
                $('#boButton').hide(); // 隐藏驳回按钮
                $('#openLayerBtn').show(); //显示资源按钮
                $('#bianButton').hide(); // 显示变更按钮
            }
        })

        // 表单取值
        layui.$('#component').on('click', function () {
            var data = form.val('demo-val-filter');
        });

        // 工作中心修改
        form.on('submit(demo-val)', function (data) {
            var field = data.field; // 获取表单字段值
            field.createdOwner = localStorage.getItem('userName');
            field.approveState = 1;
            field.isWorkCenter = 0;
            console.log(field) //在控制台显示值
            // 此处可执行 Ajax 等操作
            $.ajax({
                type: "put",
                url: '@ViewBag.RedDragonWrite' + "/api/WorkCenter/UpdateWorkCenter",
                data: JSON.stringify(field),
                dataType: "json",
                contentType: "application/json",
                success: res => {
                    // 处理响应，例如提示成功信息
                    layui.layer.msg(res.msg, { icon: 6, time: 1000 });
                    // 显示审批按钮
                    $('#approveButton').show(); // 显示审批按钮
                    // 如果需要，你可以在这里使用 workCenterCode 做其他事情
                    console.log('workCenterCode:', workCenterCode);
                },
                error: function (xhr, status, error) {
                    // 处理错误
                    layui.layer.msg('添加失败', { icon: 5, time: 1000 });
                }
            })
            return false; // 阻止默认 form 跳转
        });

        //工作中心返填
        function GetWorkCenter() {
            var workCenterId = localStorage.getItem("workCenterId")       // 正确地使用冒号来定义对象属性
            console.log(workCenterId);
            $.ajax({
                url: '@ViewBag.RedDragonWrite' + "/api/WorkCenter/GetWorkCenter",
                type: "post",
                data: JSON.stringify({ workCenterId: workCenterId }),
                dataType: "json",
                async: false,
                contentType: "application/json",
                success: function (res) {
                    $(res.data).each(function () {
                        console.log("返填数据", res.data);
                        $("#workCenterId").val(this.workCenterId);
                        $("#workCenterCode").val(this.workCenterCode);
                        $("#workCenterName").val(this.workCenterName);
                        $("#workCenterType").val(this.workCenterType.toString());//字符串类型
                        $("#classes").val(this.classes.toString());
                        $("#workCenterState").val(this.workCenterState);
                        btnnum = this.approveState;
                        ShowResource(pageIndex, pageSize);//工艺路线列表
                        form.render(); //
                    })
                }
            })
        }
    })

    //提交审核工作中心
    function updateState(stateCode) {
        var field = {}; // 获取表单字段值
        field.workCenterCode = $("#workCenterCode").val();
        field.approveState = stateCode;
        console.log(field) //在控制台显示值
        // 此处可执行 Ajax 等操作
        $.ajax({
            type: "put",
            url: '@ViewBag.RedDragonWrite' + "/api/WorkCenter/UpdApproveState",
            data: JSON.stringify(field),
            dataType: "json",
            contentType: "application/json",
            success: res => {
                // 处理响应，例如提示成功信息
                layui.layer.msg(res.msg, { icon: 6, time: 1000 });
                setTimeout(function () {
                    location.reload(); // 页面刷新
                }, 1000)
                // 如果需要，你可以在这里使用 workCenterCode 做其他事情
                console.log('workCenterCode:', workCenterCode);
            },
            error: function (xhr, status, error) {
                // 处理错误
                layui.layer.msg('审核失败', { icon: 5, time: 1000 });
            }
        })
    }

    // 绑定按钮点击事件 进行跳转页面
    $('#openLayerBtn').on('click', function () {
        var currentIndex = 1;
        var currentSize = 3;

        layer.open({
            type: 2,
            title: '工序行编辑',
            area: ['550px', '500px'],
            content: '/WorkCenter/CreateResources?CreateResources=' + $("#workCenterCode").val(),
            end: function () { // 弹出层关闭后执行的回调
                ShowResource(currentIndex, currentSize) // 调用工序行显示
            },
        });
    });



    //获取资源列表
    function ShowResource(index, size) {
        //返填需要重新初始化laypage组件
        var laypage = layui.laypage;
        //获取数据
        var data = {
            workCenterCode: $("#workCenterCode").val(),
            pageIndex: index,
            pageSize: size,
        }
        console.log(data);
        var totalCount = 0;//总条数
        var totalPage = 0;//总页数
        //获取
        $.ajax({
            url: '@ViewBag.RedDragonWrite' + "/api/Resource/QueryResource",
            type: 'post',
            data: JSON.stringify(data),
            dataType: 'json',
            contentType: "application/json",
            success: res => {
                console.log(res)
                $("tbody").empty();
                if (res.data != null) {
                    console.log(res.data);
                    totalCount = res.data.totalCount;
                    totalPage = res.data.totalPage;
                    $.each(res.data.list, function (index, item) {
                        item.createdTime = moment(item.createdTime).format("YYYY-MM-DD HH:mm:ss")
                        $("tbody").append(`<tr>` +
                            `<td>${item.resourceId}</td>` +
                            `<td>${item.resourceCode}</td>` +
                            `<td>${item.resourceName}</td>` +
                            `<td>${item.createdTime}</td>` +
                            `<td>${item.createdOwner}</td>` +
                            `<td>${item.resourceState == 1 ? "有效" : "无效"}</td>` +
                            `<td>操作</td>` +
                            `</tr>`)
                    });
                }
                laypage.render({
                    elem: 'demo-laypage-all',
                    curr: data.pageIndex,//当前页
                    limit: data.pageSize,//每页显示条数
                    limits: [3, 6, 9, 12],//每页条数的选择项
                    count: totalCount, // 数据总数，从后端得到
                    first: "首页",
                    prev: "上一页",
                    next: "下一页",
                    last: "尾页",
                    layout: ['count', 'first', 'prev', 'page', 'next', 'last', 'limit', 'skip'], // 自定义布局
                    jump: function (obj, first) {
                        console.log("分页", obj);
                        // 首次不执行
                        if (!first) {
                            pageIndex = obj.curr;
                            pageSize = obj.limit;
                            ShowResource(pageIndex, pageSize);
                        }
                    }
                });
            }
        });
    }

</script>
